<template>
  <div class="tag-device-container">
    <BaseCard title="标签列表" id="tag-card"
      ><TagList v-model:curId="curId"></TagList
    ></BaseCard>
    <BaseCard title="设备列表" id="device-card" :showRefresh="true">
      <template #header-right>
        <el-button type="primary">
          <i class="iconfont icon-tianjia"></i> 布控设备</el-button
        >
      </template>
      <PageTable
        :columns="columns"
        :tableData="tableData"
        :isDelText="true"
        delText="删除布控"
        @click-del="clickDel"
      ></PageTable>
    </BaseCard>
    <BaseDialog
      v-model:dialogVisible="dialogVisible"
      title="删除布控"
      cancelText="取消"
      btnTextTwo="删除"
      :showOk="true"
      @cancelClick="cancelClick"
      @confirmClick="confirmClick"
    >
      <FromItem label="ID">
        <el-input
          v-model="deviceDialogData.tagId"
          placeholder="请输入ID"
          disabled
          style="width: 380px"
        />
      </FromItem>
    </BaseDialog>
  </div>
</template>

<script lang="ts" setup>
import BaseCard from '@/components/baseCard.vue'
import TagList from '@/components/tagList.vue'
import PageTable from '@/components/pageTable.vue'
import BaseDialog from '@/components/baseDialog.vue'
import FromItem from '@/components/formIten.vue'
import { ref, watch } from 'vue'
import type { IColumn } from '@/type/home'
import oneImg from '@/assets/img/1.png'
import twoImg from '@/assets/img/2.png'
import threeImg from '@/assets/img/renlian.png'
const curId = ref('10001')
const columns: IColumn[] = [
  { label: 'ID', prop: 'tagId', type: 'text', width: '70' },
  { label: '头像', prop: 'personImg', type: 'imgPersonId', width: '100' },
  { label: '标签名称', prop: 'tagName', type: 'text', minwidth: '100' },
  { label: '名单类型', prop: 'typeText', type: 'text', minwidth: '200' },
  { label: '描述', prop: 'description', type: 'text', minwidth: '200' },
  { label: '在线状态', prop: 'online', type: 'onlineState', width: '100' },
  { label: 'IP', prop: 'ip', type: 'text', minwidth: '150' }
]
const tableData = ref([
  {
    tagId: 1,
    personImg: oneImg,
    tagName: '名称1',
    typeText: '类型1',
    description: '哈哈哈1',
    online: true,
    ip: '192.168.1.1'
  }
])
watch(
  () => curId.value,
  () => {
    curId.value === '10001'
      ? (tableData.value = [
          {
            tagId: 1,
            personImg: oneImg,
            tagName: '名称1',
            typeText: '类型1',
            description: '哈哈哈1',
            online: true,
            ip: '192.168.1.1'
          }
        ])
      : curId.value === '10002'
      ? (tableData.value = [
          {
            tagId: 2,
            personImg: twoImg,
            tagName: '名称1',
            typeText: '类型1',
            description: '哈哈哈1',
            online: true,
            ip: '192.168.1.1'
          }
        ])
      : (tableData.value = [
          {
            tagId: 3,
            personImg: threeImg,
            tagName: '名称1',
            typeText: '类型1',
            description: '哈哈哈1',
            online: true,
            ip: '192.168.1.1'
          }
        ])
  }
)
const dialogVisible = ref(false)
// 表单的数据
const deviceDialogData = ref({
  tagId: '',
  personImg: '',
  tagName: '',
  typeText: '',
  description: '',
  online: true,
  ip: ''
})
// 点击删除
const clickDel = (data: any) => {
  dialogVisible.value = true
  console.log(data)
  deviceDialogData.value.tagId = data.tagId
  deviceDialogData.value.personImg = data.personImg
  deviceDialogData.value.tagName = data.tagName
  deviceDialogData.value.typeText = data.typeText
  deviceDialogData.value.description = data.description
  deviceDialogData.value.online = data.online
  deviceDialogData.value.ip = data.ip
}
// 取消
const cancelClick = () => {
  dialogVisible.value = false
}
// 确定
const confirmClick = () => {
  dialogVisible.value = false
}
</script>

<style lang="scss" scoped>
.tag-device-container {
  display: flex;
  max-height: 100%;
  #tag-card {
    margin-right: 20px;
    min-width: 240px;
  }
  #device-card {
    flex-grow: 1;
  }
}
</style>
